
<!doctype html>
<html lang="en" class="no-js">
  <head>
    
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1">
      
      
      
      
        <link rel="prev" href="../cli-in-console/">
      
      
        <link rel="next" href="../unit-testing/">
      
      
      <link rel="icon" href="../assets/favicon.ico">
      <meta name="generator" content="mkdocs-1.6.0, mkdocs-material-9.5.31">
    
    
      
        <title>Strong Typing - AppRun Docs</title>
      
    
    
      <link rel="stylesheet" href="../assets/stylesheets/main.3cba04c6.min.css">
      
      


    
    
      
    
    
      
        
        
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,700,700i%7CRoboto+Mono:400,400i,700,700i&display=fallback">
        <style>:root{--md-text-font:"Roboto";--md-code-font:"Roboto Mono"}</style>
      
    
    
      <link rel="stylesheet" href="../assets/vendor/codemirror/codemirror.css">
    
    <script>__md_scope=new URL("..",location),__md_hash=e=>[...e].reduce((e,_)=>(e<<5)-e+_.charCodeAt(0),0),__md_get=(e,_=localStorage,t=__md_scope)=>JSON.parse(_.getItem(t.pathname+"."+e)),__md_set=(e,_,t=localStorage,a=__md_scope)=>{try{t.setItem(a.pathname+"."+e,JSON.stringify(_))}catch(e){}}</script>
    
      
  


  
  

<script id="__analytics">function __md_analytics(){function n(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],n("js",new Date),n("config","UA-123786786-1"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){this.value&&n("event","search",{search_term:this.value})}),document$.subscribe(function(){var a=document.forms.feedback;if(void 0!==a)for(var e of a.querySelectorAll("[type=submit]"))e.addEventListener("click",function(e){e.preventDefault();var t=document.location.pathname,e=this.getAttribute("data-md-value");n("event","feedback",{page:t,data:e}),a.firstElementChild.disabled=!0;e=a.querySelector(".md-feedback__note [data-md-value='"+e+"']");e&&(e.hidden=!1)}),a.hidden=!1}),location$.subscribe(function(e){n("config","UA-123786786-1",{page_path:e.pathname})})});var e=document.createElement("script");e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=UA-123786786-1",document.getElementById("__analytics").insertAdjacentElement("afterEnd",e)}</script>
  
    <script>"undefined"!=typeof __md_analytics&&__md_analytics()</script>
  

    
    
    
  </head>
  
  
    <body dir="ltr">
  
    
    <input class="md-toggle" data-md-toggle="drawer" type="checkbox" id="__drawer" autocomplete="off">
    <input class="md-toggle" data-md-toggle="search" type="checkbox" id="__search" autocomplete="off">
    <label class="md-overlay" for="__drawer"></label>
    <div data-md-component="skip">
      
        
        <a href="#strong-typing" class="md-skip">
          Skip to content
        </a>
      
    </div>
    <div data-md-component="announce">
      
    </div>
    
    
      

  

<header class="md-header md-header--shadow" data-md-component="header">
  <nav class="md-header__inner md-grid" aria-label="Header">
    <a href=".." title="AppRun Docs" class="md-header__button md-logo" aria-label="AppRun Docs" data-md-component="logo">
      
  <img src="../assets/logo.png" alt="logo">

    </a>
    <label class="md-header__button md-icon" for="__drawer">
      
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3V6m0 5h18v2H3v-2m0 5h18v2H3v-2Z"/></svg>
    </label>
    <div class="md-header__title" data-md-component="header-title">
      <div class="md-header__ellipsis">
        <div class="md-header__topic">
          <span class="md-ellipsis">
            AppRun Docs
          </span>
        </div>
        <div class="md-header__topic" data-md-component="header-topic">
          <span class="md-ellipsis">
            
              Strong Typing
            
          </span>
        </div>
      </div>
    </div>
    
    
      <script>var media,input,key,value,palette=__md_get("__palette");if(palette&&palette.color){"(prefers-color-scheme)"===palette.color.media&&(media=matchMedia("(prefers-color-scheme: light)"),input=document.querySelector(media.matches?"[data-md-color-media='(prefers-color-scheme: light)']":"[data-md-color-media='(prefers-color-scheme: dark)']"),palette.color.media=input.getAttribute("data-md-color-media"),palette.color.scheme=input.getAttribute("data-md-color-scheme"),palette.color.primary=input.getAttribute("data-md-color-primary"),palette.color.accent=input.getAttribute("data-md-color-accent"));for([key,value]of Object.entries(palette.color))document.body.setAttribute("data-md-color-"+key,value)}</script>
    
    
    
      <label class="md-header__button md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
      </label>
      <div class="md-search" data-md-component="search" role="dialog">
  <label class="md-search__overlay" for="__search"></label>
  <div class="md-search__inner" role="search">
    <form class="md-search__form" name="search">
      <input type="text" class="md-search__input" name="query" aria-label="Search" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
      <label class="md-search__icon md-icon" for="__search">
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5Z"/></svg>
        
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20 11v2H8l5.5 5.5-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5 8 11h12Z"/></svg>
      </label>
      <nav class="md-search__options" aria-label="Search">
        
        <button type="reset" class="md-search__icon md-icon" title="Clear" aria-label="Clear" tabindex="-1">
          
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41Z"/></svg>
        </button>
      </nav>
      
    </form>
    <div class="md-search__output">
      <div class="md-search__scrollwrap" tabindex="0" data-md-scrollfix>
        <div class="md-search-result" data-md-component="search-result">
          <div class="md-search-result__meta">
            Initializing search
          </div>
          <ol class="md-search-result__list" role="presentation"></ol>
        </div>
      </div>
    </div>
  </div>
</div>
    
    
      <div class="md-header__source">
        <a href="https://github.com/apprunjs/apprun-docs" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
  </div>
  <div class="md-source__repository">
    GitHub
  </div>
</a>
      </div>
    
  </nav>
  
</header>
    
    <div class="md-container" data-md-component="container">
      
      
        
          
        
      
      <main class="md-main" data-md-component="main">
        <div class="md-main__inner md-grid">
          
            
              
              <div class="md-sidebar md-sidebar--primary" data-md-component="sidebar" data-md-type="navigation" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    



<nav class="md-nav md-nav--primary" aria-label="Navigation" data-md-level="0">
  <label class="md-nav__title" for="__drawer">
    <a href=".." title="AppRun Docs" class="md-nav__button md-logo" aria-label="AppRun Docs" data-md-component="logo">
      
  <img src="../assets/logo.png" alt="logo">

    </a>
    AppRun Docs
  </label>
  
    <div class="md-nav__source">
      <a href="https://github.com/apprunjs/apprun-docs" title="Go to repository" class="md-source" data-md-component="source">
  <div class="md-source__icon md-icon">
    
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Free 6.6.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2024 Fonticons, Inc.--><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
  </div>
  <div class="md-source__repository">
    GitHub
  </div>
</a>
    </div>
  
  <ul class="md-nav__list" data-md-scrollfix>
    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href=".." class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Home
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2" >
        
          
          <label class="md-nav__link" for="__nav_2" id="__nav_2_label" tabindex="">
            
  
  <span class="md-ellipsis">
    Concepts
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_2_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2">
            <span class="md-nav__icon md-icon"></span>
            Concepts
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    
    
    
      
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_1" >
        
          
          <label class="md-nav__link" for="__nav_2_1" id="__nav_2_1_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    Architecture
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_1_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2_1">
            <span class="md-nav__icon md-icon"></span>
            Architecture
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../architecture/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Overview
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../event-pubsub/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Event Pubsub
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../state-management/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    State Management
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../component/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Component
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../reactivity/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Reactivity
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
              
                
  
  
  
  
    
    
    
      
    
    
    <li class="md-nav__item md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_2_2" >
        
          
          <label class="md-nav__link" for="__nav_2_2" id="__nav_2_2_label" tabindex="0">
            
  
  <span class="md-ellipsis">
    Examples
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="2" aria-labelledby="__nav_2_2_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_2_2">
            <span class="md-nav__icon md-icon"></span>
            Examples
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../architecture-ideas/dapr/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Microservice wirh Dapr
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../architecture-ideas/firebase-app/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Serverless App Using Firebase
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../architecture-ideas/db-websocket/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Database and Websocket
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../architecture-ideas/rust-app/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Webassembly app with Rust
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../architecture-ideas/state-machine/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    State Machine
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../showcase/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Showcase
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_3" >
        
          
          <label class="md-nav__link" for="__nav_3" id="__nav_3_label" tabindex="">
            
  
  <span class="md-ellipsis">
    Getting started
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_3_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_3">
            <span class="md-nav__icon md-icon"></span>
            Getting started
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../installation/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Installation
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../tutorial/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Tutorial
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../create-apprun-app/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Create AppRun App
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../spa/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Single Page App
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
    
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--active md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_4" checked>
        
          
          <label class="md-nav__link" for="__nav_4" id="__nav_4_label" tabindex="">
            
  
  <span class="md-ellipsis">
    Advanced
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_4_label" aria-expanded="true">
          <label class="md-nav__title" for="__nav_4">
            <span class="md-nav__icon md-icon"></span>
            Advanced
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../view-patterns/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    JSX
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../directive/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Directive
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../svg/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    SVG
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../react/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Use with React
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../3rd-party-libs/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    3rd Party Intergration
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../cli-in-console/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Dev Tools
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
    
  
  
  
    <li class="md-nav__item md-nav__item--active">
      
      <input class="md-nav__toggle md-toggle" type="checkbox" id="__toc">
      
      
        
      
      
        <label class="md-nav__link md-nav__link--active" for="__toc">
          
  
  <span class="md-ellipsis">
    Strong Typing
  </span>
  

          <span class="md-nav__icon md-icon"></span>
        </label>
      
      <a href="./" class="md-nav__link md-nav__link--active">
        
  
  <span class="md-ellipsis">
    Strong Typing
  </span>
  

      </a>
      
        

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#strong-typing-of-state" class="md-nav__link">
    <span class="md-ellipsis">
      Strong Typing of State
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Strong Typing of State">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#typed-view" class="md-nav__link">
    <span class="md-ellipsis">
      Typed View
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#typed-update" class="md-nav__link">
    <span class="md-ellipsis">
      Typed Update
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#typed-application" class="md-nav__link">
    <span class="md-ellipsis">
      Typed Application
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#strong-typing-of-events" class="md-nav__link">
    <span class="md-ellipsis">
      Strong Typing of Events
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Strong Typing of Events">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#enum-of-event-names" class="md-nav__link">
    <span class="md-ellipsis">
      Enum of Event Names
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#update-tuple" class="md-nav__link">
    <span class="md-ellipsis">
      Update Tuple
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#discriminated-union-typed-event-names" class="md-nav__link">
    <span class="md-ellipsis">
      Discriminated Union Typed Event Names
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#typed-events-in-view" class="md-nav__link">
    <span class="md-ellipsis">
      Typed Events in View
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#strong-typing-of-component" class="md-nav__link">
    <span class="md-ellipsis">
      Strong Typing of Component
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Strong Typing of Component">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#typed-event-decorator" class="md-nav__link">
    <span class="md-ellipsis">
      Typed Event Decorator
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#typed-on-directive" class="md-nav__link">
    <span class="md-ellipsis">
      Typed $on Directive
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#conclusion" class="md-nav__link">
    <span class="md-ellipsis">
      Conclusion
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
      
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../unit-testing/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Unit Testing
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../notebooks/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Notebooks
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    
    
    
      
        
        
      
    
    
    <li class="md-nav__item md-nav__item--section md-nav__item--nested">
      
        
        
        <input class="md-nav__toggle md-toggle " type="checkbox" id="__nav_5" >
        
          
          <label class="md-nav__link" for="__nav_5" id="__nav_5_label" tabindex="">
            
  
  <span class="md-ellipsis">
    AppRun Site
  </span>
  

            <span class="md-nav__icon md-icon"></span>
          </label>
        
        <nav class="md-nav" data-md-level="1" aria-labelledby="__nav_5_label" aria-expanded="false">
          <label class="md-nav__title" for="__nav_5">
            <span class="md-nav__icon md-icon"></span>
            AppRun Site
          </label>
          <ul class="md-nav__list" data-md-scrollfix>
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../apprun-site/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Create
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../apprun-site-build/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Build
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../apprun-site-csr/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Client-Side Rendering
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../apprun-site-ssr/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Server-Side Rendering
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../apprun-site-static/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Static Web Site
  </span>
  

      </a>
    </li>
  

              
            
              
                
  
  
  
  
    <li class="md-nav__item">
      <a href="../apprun-site-cli/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    AppRun-Site CLI
  </span>
  

      </a>
    </li>
  

              
            
          </ul>
        </nav>
      
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../resources/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    Resources
  </span>
  

      </a>
    </li>
  

    
      
      
  
  
  
  
    <li class="md-nav__item">
      <a href="../about/" class="md-nav__link">
        
  
  <span class="md-ellipsis">
    About
  </span>
  

      </a>
    </li>
  

    
  </ul>
</nav>
                  </div>
                </div>
              </div>
            
            
              
              <div class="md-sidebar md-sidebar--secondary" data-md-component="sidebar" data-md-type="toc" >
                <div class="md-sidebar__scrollwrap">
                  <div class="md-sidebar__inner">
                    

<nav class="md-nav md-nav--secondary" aria-label="Table of contents">
  
  
  
    
  
  
    <label class="md-nav__title" for="__toc">
      <span class="md-nav__icon md-icon"></span>
      Table of contents
    </label>
    <ul class="md-nav__list" data-md-component="toc" data-md-scrollfix>
      
        <li class="md-nav__item">
  <a href="#strong-typing-of-state" class="md-nav__link">
    <span class="md-ellipsis">
      Strong Typing of State
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Strong Typing of State">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#typed-view" class="md-nav__link">
    <span class="md-ellipsis">
      Typed View
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#typed-update" class="md-nav__link">
    <span class="md-ellipsis">
      Typed Update
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#typed-application" class="md-nav__link">
    <span class="md-ellipsis">
      Typed Application
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#strong-typing-of-events" class="md-nav__link">
    <span class="md-ellipsis">
      Strong Typing of Events
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Strong Typing of Events">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#enum-of-event-names" class="md-nav__link">
    <span class="md-ellipsis">
      Enum of Event Names
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#update-tuple" class="md-nav__link">
    <span class="md-ellipsis">
      Update Tuple
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#discriminated-union-typed-event-names" class="md-nav__link">
    <span class="md-ellipsis">
      Discriminated Union Typed Event Names
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#typed-events-in-view" class="md-nav__link">
    <span class="md-ellipsis">
      Typed Events in View
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#strong-typing-of-component" class="md-nav__link">
    <span class="md-ellipsis">
      Strong Typing of Component
    </span>
  </a>
  
    <nav class="md-nav" aria-label="Strong Typing of Component">
      <ul class="md-nav__list">
        
          <li class="md-nav__item">
  <a href="#typed-event-decorator" class="md-nav__link">
    <span class="md-ellipsis">
      Typed Event Decorator
    </span>
  </a>
  
</li>
        
          <li class="md-nav__item">
  <a href="#typed-on-directive" class="md-nav__link">
    <span class="md-ellipsis">
      Typed $on Directive
    </span>
  </a>
  
</li>
        
      </ul>
    </nav>
  
</li>
      
        <li class="md-nav__item">
  <a href="#conclusion" class="md-nav__link">
    <span class="md-ellipsis">
      Conclusion
    </span>
  </a>
  
</li>
      
    </ul>
  
</nav>
                  </div>
                </div>
              </div>
            
          
          
            <div class="md-content" data-md-component="content">
              <article class="md-content__inner md-typeset">
                
                  

  
  


<h1 id="strong-typing">Strong Typing<a class="headerlink" href="#strong-typing" title="Permanent link">&para;</a></h1>
<p>From the AppRun architecture and AppRun event life cycle, we can see two places that require strong typing: state and event names.</p>
<ul>
<li>The initial state and the state passed between the view function and event handlers</li>
<li>The event names for publishing and subscribing to Apprun events</li>
</ul>
<p><img alt="" src="../imgs/Figure_1-1.png" /></p>
<h2 id="strong-typing-of-state">Strong Typing of State<a class="headerlink" href="#strong-typing-of-state" title="Permanent link">&para;</a></h2>
<p>The state is used in the <em>view</em> function and in the <em>update</em>(event handlers). We can make the state strong typed in the <em>view</em> function and in the <em>update</em>.</p>
<h3 id="typed-view">Typed View<a class="headerlink" href="#typed-view" title="Permanent link">&para;</a></h3>
<p>First, we can make the state used in the <em>view</em> strongly typed by importing the View type from AppRun and applying it to the view function.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">app</span><span class="p">,</span><span class="w"> </span><span class="nx">View</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;apprun&#39;</span><span class="p">;</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">view</span><span class="o">:</span><span class="w"> </span><span class="nx">View</span><span class="o">&lt;</span><span class="nx">number</span><span class="o">&gt;</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">state</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="o">&lt;</span><span class="nx">div</span><span class="o">&gt;</span><span class="p">...</span><span class="o">&lt;</span><span class="err">/div&gt;</span>
</code></pre></div>
<p>The View type imported from AppRun is a <a href="https://www.typescriptlang.org/docs/handbook/2/generics.html">generic type</a>. It makes the view function into a generic function, which let us define the type of its parameters. E.g., we define the view function to be View<number>, TypeScript recognizes the state parameter of the view function is a number.
<img alt="typed view " src="https://cdn-images-1.medium.com/max/1600/1*jT2qW1LgZVqSZWZgb_VZjQ.png" /></p>
<h3 id="typed-update">Typed Update<a class="headerlink" href="#typed-update" title="Permanent link">&para;</a></h3>
<p>Next, let's import the Update type from AppRun and apply it to the update object.</p>
<div class="highlight"><pre><span></span><code><span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">app</span><span class="p">,</span><span class="w"> </span><span class="nx">View</span><span class="p">,</span><span class="w"> </span><span class="nx">Update</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">&#39;apprun&#39;</span><span class="p">;</span>
<span class="kd">const</span><span class="w"> </span><span class="nx">update</span><span class="o">:</span><span class="w"> </span><span class="nx">Update</span><span class="o">&lt;</span><span class="nx">number</span><span class="o">&gt;</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="p">}</span>
</code></pre></div>
<p>The Update type imported from AppRun is also generic. It makes the event handlers in the update object into generic functions. TypeScript recognizes the state parameter of the event handler functions as are number.</p>
<p><img alt="Typed Update" src="https://cdn-images-1.medium.com/max/1600/1*2xYoeK0KwyQ2FYMXwMjnmA.png" /></p>
<h3 id="typed-application">Typed Application<a class="headerlink" href="#typed-application" title="Permanent link">&para;</a></h3>
<p>Finally, let's make the application strongly typed. The <em>app.start</em> is a generic function already. If we give the <em>app.start</em> function a type, E.g., number, it means the state of the application is number, the view of the application is View<number> and the update of the application is Update<number>.</p>
<div class="highlight"><pre><span></span><code><span class="nx">app</span><span class="p">.</span><span class="nx">start</span><span class="o">&lt;</span><span class="nx">number</span><span class="o">&gt;</span><span class="p">(</span><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="p">)</span>
</code></pre></div>
<p>If the type of state does not match the types assigned to the <em>app.start</em> function, TypeScript catches the type error.</p>
<p><img alt="Catch State Type Error" src="https://cdn-images-1.medium.com/max/1600/1*fK3RbeU4lWt9_kPDa7-jFg.png" /></p>
<p>If the type of the view function does not match the types assigned to the <em>app.start</em> function, TypeScript catches the type error.</p>
<p><img alt="Catch View Type Error" src="https://cdn-images-1.medium.com/max/1600/1*QsEmxowOL0oKWZ6dvlTw7Q.png" /></p>
<p>If the type of the update object does not match the type assigned to the <em>app.start</em> function, TypeScript catches the type error.</p>
<p><img alt="Catch Update Type Error" src="https://cdn-images-1.medium.com/max/1600/1*VvHWpwTr0pXm08LHgXtTpQ.png" /></p>
<p>So far, e have made the strongly typed state to the view function, the event handlers in the update object, and the application. Next, we will move to make strongly typed events.</p>
<h2 id="strong-typing-of-events">Strong Typing of Events<a class="headerlink" href="#strong-typing-of-events" title="Permanent link">&para;</a></h2>
<p>AppRun update object is a named collection or dictionary of the event handlers. The event names are strings, such as +1 and -1. They are not typed, not checked by the compiler, and not IDE friendly. Instead, we can use the TypeScript enum to define the event names.</p>
<h3 id="enum-of-event-names">Enum of Event Names<a class="headerlink" href="#enum-of-event-names" title="Permanent link">&para;</a></h3>
<p>We define the Events enum and use it in the view functions and the update object.</p>
<div class="highlight"><pre><span></span><code><span class="kr">enum</span><span class="w"> </span><span class="nx">Events</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">inc</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;+1&#39;</span><span class="p">,</span><span class="w"> </span><span class="nx">dec</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;-1&#39;</span><span class="w"> </span><span class="p">}</span>
</code></pre></div>
<p><img alt="Enum of Event Names" src="https://cdn-images-1.medium.com/max/1600/1*veW7AQ1RTVcoRbd3IMp0og.png" /></p>
<p>You can see when we type 'Events.', Visual Studio code provides the intelliSense to help us typing. However, you can also see that the string +0 is still allowed in the update object. It is because the object index can only be a number or string. Or as long as a number or string is used, the compiler is happy and has no more type checking.</p>
<h3 id="update-tuple">Update Tuple<a class="headerlink" href="#update-tuple" title="Permanent link">&para;</a></h3>
<p>The <em>update</em> can be an array of tuples for defining AppRun event handlers.</p>
<p><img alt="Update Tuple" src="https://cdn-images-1.medium.com/max/1600/1*fTqni_vS4c5uD2_Q4Kw31A.png" /></p>
<p>The event handler tuple has two fields: the event name and the event handler function.</p>
<p>We can use two advanced TypeScript types the tuple: union type and string literal type, to create so call discriminated union. For more information about union type, string literal type, and discriminated union, please refer to the TypeScript handbook.</p>
<h3 id="discriminated-union-typed-event-names">Discriminated Union Typed Event Names<a class="headerlink" href="#discriminated-union-typed-event-names" title="Permanent link">&para;</a></h3>
<p>First, we define a union type called Events, which is made out of two string literal types, -1 and +1.</p>
<div class="highlight"><pre><span></span><code><span class="nx">type</span><span class="w"> </span><span class="nx">Events</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="s1">&#39;-1&#39;</span><span class="w"> </span><span class="o">|</span><span class="w"> </span><span class="s1">&#39;+1&#39;</span><span class="p">;</span>
</code></pre></div>
<p>Then, we use the Events type as the second generic of the Update type imported from AppRun and apply it to the <em>update</em> tuple.</p>
<div class="highlight"><pre><span></span><code><span class="kd">const</span><span class="w"> </span><span class="nx">update</span><span class="o">:</span><span class="w"> </span><span class="nx">Update</span><span class="o">&lt;</span><span class="nx">number</span><span class="p">,</span><span class="w"> </span><span class="nx">Events</span><span class="o">&gt;</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="w"> </span><span class="p">...</span><span class="w"> </span><span class="p">]</span>
</code></pre></div>
<p>The event names are strongly typed. TypeScript can even provide code auto-completion (IntelliSense) to hint at the event names.</p>
<p><img alt="Typed Update Tuple" src="https://cdn-images-1.medium.com/max/1600/1*Z1y_-n7_Y1bzDUJuw0ORVw.png" /></p>
<p>If the event name is not one of the strings defined in the Events type, TypeScript catches the error.</p>
<p><img alt="Catch Event Name Error in Update Tuple" src="https://cdn-images-1.medium.com/max/1600/1*kkwPCiTcA9ny9IJ3uFTZsA.png" /></p>
<h3 id="typed-events-in-view">Typed Events in View<a class="headerlink" href="#typed-events-in-view" title="Permanent link">&para;</a></h3>
<p>To make the event names in the view function strongly type, we need to make the event names of the application strongly type first. We can add the Events type to the <em>app</em>.start_ the generic function.</p>
<div class="highlight"><pre><span></span><code><span class="nx">app</span><span class="p">.</span><span class="nx">start</span><span class="o">&lt;</span><span class="nx">number</span><span class="p">,</span><span class="w"> </span><span class="nx">Events</span><span class="o">&gt;</span><span class="p">(...)</span>
</code></pre></div>
<p>It makes the application only can trigger the events that are defined in the Events type. Because we have made the event names strongly typed TypeScript provides intelliSense to the event names of the application.</p>
<p><img alt="Typed Event Names in the Application" src="https://cdn-images-1.medium.com/max/1600/1*fY-lIFIuFSpukxP3s82JYQ.png" /></p>
<p>TypeScript also catches the event name errors in the view function.</p>
<p><img alt="Catch Event Name Error in View" src="https://cdn-images-1.medium.com/max/1600/1*V3O5lHlg_ShD75Va0stOpA.png" /></p>
<p>So far, we have accomplished strong typing for the AppRun global application. Next, we will implement strong typing for AppRun Components.</p>
<h2 id="strong-typing-of-component">Strong Typing of Component<a class="headerlink" href="#strong-typing-of-component" title="Permanent link">&para;</a></h2>
<p>AppRun Component is like a scoped AppRun application. It also has three parts: <em>state</em>, <em>view</em>, and <em>update</em>.</p>
<p>AppRun Component is a generic class. We create our components by extending the AppRun Component class. We can add the state type and events type to the Component class, as well as to the view function, and update the tuple to make the component strongly typed so that TypeScript can provide IntelliSense and type validation while we are coding.</p>
<p><img alt="Typed State and Type Event Names in Component" src="https://cdn-images-1.medium.com/max/1600/1*RY-DEfVgOjj_clIEW4HeTA.png" /></p>
<h3 id="typed-event-decorator">Typed Event Decorator<a class="headerlink" href="#typed-event-decorator" title="Permanent link">&para;</a></h3>
<p>The AppRun @on decorator makes a function in the component class to be an event handler. The @on decorator is also generic. When we add the event type to the @on the decorator, TypeScript recognizes and enforces the event names to be the event type.</p>
<p><img alt="Typed On Decorator" src="https://cdn-images-1.medium.com/max/1600/1*AhiWkaV3WynuHElM6mPqjQ.png" /></p>
<h3 id="typed-on-directive">Typed $on Directive<a class="headerlink" href="#typed-on-directive" title="Permanent link">&para;</a></h3>
<p>The AppRun <a href="../directive/">directive</a> is a syntax sugar for JSX. The $on directive is helpful for publishing DOM events to AppRun events. The $on directive can be strongly typed.</p>
<p><img alt="Typed $on Directive" src="https://cdn-images-1.medium.com/max/1600/1*Rje-0LBmymjwBZbFW6zHKw.png" /></p>
<h2 id="conclusion">Conclusion<a class="headerlink" href="#conclusion" title="Permanent link">&para;</a></h2>
<p>Thanks to TypeScript, we can make AppRun application strong-typed.</p>









  




                
              </article>
            </div>
          
          
<script>var target=document.getElementById(location.hash.slice(1));target&&target.name&&(target.checked=target.name.startsWith("__tabbed_"))</script>
        </div>
        
      </main>
      
        <footer class="md-footer">
  
  <div class="md-footer-meta md-typeset">
    <div class="md-footer-meta__inner md-grid">
      <div class="md-copyright">
  
    <div class="md-copyright__highlight">
      Copyright &copy; 2015 - 2025 Yiyi Sun
    </div>
  
  
    Made with
    <a href="https://squidfunk.github.io/mkdocs-material/" target="_blank" rel="noopener">
      Material for MkDocs
    </a>
  
</div>
      
    </div>
  </div>
</footer>
      
    </div>
    <div class="md-dialog" data-md-component="dialog">
      <div class="md-dialog__inner md-typeset"></div>
    </div>
    
    
    <script id="__config" type="application/json">{"base": "..", "features": ["navigation.sections"], "search": "../assets/javascripts/workers/search.b8dbb3d2.min.js", "translations": {"clipboard.copied": "Copied to clipboard", "clipboard.copy": "Copy to clipboard", "search.result.more.one": "1 more on this page", "search.result.more.other": "# more on this page", "search.result.none": "No matching documents", "search.result.one": "1 matching document", "search.result.other": "# matching documents", "search.result.placeholder": "Type to start searching", "search.result.term.missing": "Missing", "select.version": "Select version"}}</script>
    
    
      <script src="../assets/javascripts/bundle.fe8b6f2b.min.js"></script>
      
        <script src="../assets/vendor/codemirror/codemirror.js"></script>
      
        <script src="../assets/vendor/codemirror/mode/javascript/javascript.js"></script>
      
        <script src="../assets/vendor/codemirror/mode/xml/xml.js"></script>
      
        <script src="../assets/vendor/codemirror/mode/jsx/jsx.js"></script>
      
        <script src="../assets/apprun-play.js"></script>
      
        <script src="../assets/apprun-code.js"></script>
      
    
  </body>
</html>